<template>
  <div class="personal-main">
    <div class="bind-account-card">
      <div class="card-header">
        <h3><i class="fa fa-id-card-o"></i> 开通第三方账户</h3>
        <p class="subtitle">请开通汇付宝存管账户以便于您正常理财</p>
      </div>

      <form class="bind-form" @submit.prevent="commitBind">
        <div class="form-group">
          <label class="form-label">真实姓名</label>
          <div class="form-input">
            <input
                v-model="userBind.name"
                type="text"
                maxlength="16"
                placeholder="请输入您的真实姓名"
                :class="{ 'is-invalid': errors.name }"
            />
            <div class="invalid-feedback" v-if="errors.name">{{ errors.name }}</div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">身份证号</label>
          <div class="form-input">
            <input
                v-model="userBind.idCard"
                type="text"
                maxlength="18"
                placeholder="请输入您的身份证号"
                :class="{ 'is-invalid': errors.idCard }"
            />
            <div class="invalid-feedback" v-if="errors.idCard">{{ errors.idCard }}</div>
            <p class="form-hint">身份证信息认证后将不可修改，请您仔细填写</p>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">绑定银行</label>
          <div class="form-input">
            <input
                v-model="userBind.bankType"
                type="text"
                placeholder="请输入银行名称"
                :class="{ 'is-invalid': errors.bankType }"
            />
            <div class="invalid-feedback" v-if="errors.bankType">{{ errors.bankType }}</div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">银行卡号</label>
          <div class="form-input">
            <input
                v-model="userBind.bankNo"
                type="text"
                placeholder="请输入本人持有的银行卡号"
                :class="{ 'is-invalid': errors.bankNo }"
            />
            <div class="invalid-feedback" v-if="errors.bankNo">{{ errors.bankNo }}</div>
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">预留手机</label>
          <div class="form-input">
            <input
                v-model="userBind.mobile"
                type="text"
                placeholder="请输入银行卡预留手机号"
                :class="{ 'is-invalid': errors.mobile }"
            />
            <div class="invalid-feedback" v-if="errors.mobile">{{ errors.mobile }}</div>
          </div>
        </div>

        <div class="form-group agree-group">
          <label class="form-checkbox">
            <input type="checkbox" v-model="agree" />
            <span class="checkbox-icon"></span>
            <span class="checkbox-text">我已阅读并同意</span>
          </label>
          <a href="#" class="text-primary" target="_blank">《汇付宝托管账户协议》</a>
        </div>

        <div class="form-group form-actions">
          <button
              type="submit"
              class="btn btn-primary"
              :disabled="!isFormValid || !agree"
              :class="{ 'btn-disabled': !isFormValid || !agree }"
          >
            <i class="fa fa-check-circle"></i> 立即开户
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agree: false,
      userBind: {
        name: '',
        idCard: '',
        bankType: '',
        bankNo: '',
        mobile: ''
      },
      errors: {}
    }
  },
  computed: {
    isFormValid() {
      this.validateForm();
      return Object.keys(this.errors).length === 0;
    }
  },
  methods: {
    validateForm() {
      this.errors = {};

      if (!this.userBind.name.trim()) {
        this.errors.name = '请输入真实姓名';
      }

      if (!this.userBind.idCard.trim()) {
        this.errors.idCard = '请输入身份证号';
      } else if (!/^\d{17}[\dXx]$/.test(this.userBind.idCard)) {
        this.errors.idCard = '请输入有效的身份证号码';
      }

      if (!this.userBind.bankType.trim()) {
        this.errors.bankType = '请输入银行名称';
      }

      if (!this.userBind.bankNo.trim()) {
        this.errors.bankNo = '请输入银行卡号';
      } else if (!/^\d{16,19}$/.test(this.userBind.bankNo)) {
        this.errors.bankNo = '请输入有效的银行卡号';
      }

      if (!this.userBind.mobile.trim()) {
        this.errors.mobile = '请输入预留手机号';
      } else if (!/^1[3-9]\d{9}$/.test(this.userBind.mobile)) {
        this.errors.mobile = '请输入有效的手机号';
      }
    },

    commitBind() {
      if (!this.isFormValid || !this.agree) return;

      this.$confirm(
          '您即将前往汇付宝绑定账号，确认继续吗？',
          '前往汇付宝资金托管平台',
          {
            confirmButtonText: '立即前往',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }
      ).then(() => {
        this.$axios
            .$post('/api/core/userBind/auth/bind', this.userBind)
            .then((response) => {
              // 显示加载状态
              this.$loading({
                lock: true,
                text: '正在跳转至汇付宝...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });

              // 延迟执行，确保加载动画显示
              setTimeout(() => {
                document.write(response.data.formStr);
              }, 800);
            })
            .catch(error => {
              this.$message.error('开户失败，请稍后重试');
              console.error('开户失败', error);
            });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    }
  }
}
</script>

<style scoped>
/* 主容器样式 */
.personal-main {
  max-width: 800px;
  margin: 30px auto;
  padding: 0 15px;
}

/* 卡片样式 */
.bind-account-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.bind-account-card:hover {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.card-header {
  padding: 25px 30px;
  background: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
  color: #ffffff;
}

.card-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.card-header h3 i {
  margin-right: 10px;
  font-size: 24px;
}

.card-header .subtitle {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.9;
}

/* 表单样式 */
.bind-form {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
}

.form-input {
  position: relative;
}

.form-input input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.2s ease;
  outline: none;
}

.form-input input:focus {
  border-color: #1e88e5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.2);
}

.form-input input.is-invalid {
  border-color: #f56c6c;
}

.invalid-feedback {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 5px;
  display: block;
}

.form-hint {
  color: #999999;
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.5;
}

/* 同意条款样式 */
.agree-group {
  display: flex;
  align-items: center;
  margin-top: 25px;
}

.form-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin-right: 8px;
}

.form-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-icon {
  position: relative;
  height: 18px;
  width: 18px;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  transition: all 0.2s ease;
  margin-right: 8px;
}

.form-checkbox input:checked ~ .checkbox-icon {
  background-color: #1e88e5;
  border-color: #1e88e5;
}

.checkbox-icon:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox input:checked ~ .checkbox-icon:after {
  display: block;
}

.checkbox-text {
  font-size: 14px;
  color: #333333;
}

.text-primary {
  color: #1e88e5;
  text-decoration: none;
  transition: all 0.2s ease;
}

.text-primary:hover {
  color: #0d47a1;
  text-decoration: underline;
}

/* 按钮样式 */
.form-actions {
  margin-top: 30px;
  text-align: center;
}

.btn {
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background-color: #1e88e5;
  color: #ffffff;
  border: none;
}

.btn-primary:hover:not(.btn-disabled) {
  background-color: #0d47a1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
}

.btn-primary:active:not(.btn-disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(30, 136, 229, 0.3);
}

.btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn i {
  margin-right: 8px;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .card-header {
    padding: 20px;
  }

  .bind-form {
    padding: 20px;
  }

  .btn {
    width: 100%;
  }
}
</style>